// 定义一个微信小程序自定义导航栏组件
Component({
  // 组件选项配置
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持，允许使用多个插槽
  },
  /**
   * 组件的属性列表
   * 定义父组件可以传递给当前组件的属性
   */
  properties: {
    // 外部样式类名
    extClass: {
      type: String,        // 属性类型为字符串
      value: ''           // 默认值为空字符串
    },
    // 导航栏标题
    title: {
      type: String,        // 属性类型为字符串
      value: ''           // 默认值为空字符串
    },
    // 导航栏背景色
    background: {
      type: String,        // 属性类型为字符串
      value: ''           // 默认值为空字符串
    },
    // 导航栏文字颜色
    color: {
      type: String,        // 属性类型为字符串
      value: ''           // 默认值为空字符串
    },
    // 是否显示返回按钮
    back: {
      type: Boolean,       // 属性类型为布尔值
      value: true         // 默认值为true，显示返回按钮
    },
    // 是否显示加载状态
    loading: {
      type: Boolean,       // 属性类型为布尔值
      value: false        // 默认值为false，不显示加载状态
    },
    // 是否显示首页按钮
    homeButton: {
      type: Boolean,       // 属性类型为布尔值
      value: false,       // 默认值为false，不显示首页按钮
    },
    // 显示隐藏时是否有透明度动画效果
    animated: {
      // 显示隐藏的时候opacity动画效果
      type: Boolean,       // 属性类型为布尔值
      value: true         // 默认值为true，启用动画效果
    },
    // 是否显示导航栏
    show: {
      // 显示隐藏导航，隐藏的时候navigation-bar的高度占位还在
      type: Boolean,       // 属性类型为布尔值
      value: true,        // 默认值为true，显示导航栏
      observer: '_showChange'  // 监听器函数，当值改变时调用_showChange方法
    },
    // 返回按钮的页面层级深度
    // back为true的时候，返回的页面深度
    delta: {
      type: Number,        // 属性类型为数字
      value: 1            // 默认值为1，返回上一页
    },
  },
  /**
   * 组件的初始数据
   * 定义组件内部使用的数据
   */
  data: {
    displayStyle: ''      // 显示样式字符串，用于控制组件的显示隐藏动画
  },
  // 组件生命周期函数
  lifetimes: {
    // 组件实例被创建并进入页面节点树时执行
    attached() {
      // 获取胶囊按钮的布局位置信息
      const rect = wx.getMenuButtonBoundingClientRect()
      // 获取系统信息
      wx.getSystemInfo({
        success: (res) => {
          // 判断是否为安卓系统
          const isAndroid = res.platform === 'android'
          // 判断是否为开发者工具
          const isDevtools = res.platform === 'devtools'
          // 设置组件数据
          this.setData({
            ios: !isAndroid,    // 是否为iOS系统
            // 设置右侧内边距，避免与胶囊按钮重叠
            innerPaddingRight: `padding-right: ${res.windowWidth - rect.left}px`,
            // 设置左侧区域宽度
            leftWidth: `width: ${res.windowWidth - rect.left }px`,
            // 设置安全区域顶部高度和内边距
            safeAreaTop: isDevtools || isAndroid ? `height: calc(var(--height) + ${res.safeArea.top}px); padding-top: ${res.safeArea.top}px` : ``
          })
        }
      })
    },
  },
  /**
   * 组件的方法列表
   * 定义组件内部的函数方法
   */
  methods: {
    // 显示状态改变时的处理函数
    _showChange(show) {
      // 获取是否启用动画
      const animated = this.data.animated
      // 初始化显示样式字符串
      let displayStyle = ''
      // 根据是否启用动画设置不同的显示样式
      if (animated) {
        // 启用动画：使用透明度过渡效果
        displayStyle = `opacity: ${
          show ? '1' : '0'        // 显示时透明度为1，隐藏时为0
        };transition:opacity 0.5s;`  // 0.5秒的透明度过渡动画
      } else {
        // 不启用动画：直接显示或隐藏
        displayStyle = `display: ${show ? '' : 'none'}`  // 显示时为默认，隐藏时为none
      }
      // 更新组件数据
      this.setData({
        displayStyle
      })
    },
    // 返回按钮点击事件处理函数
    back() {
      // 获取组件数据
      const data = this.data
      // 如果设置了返回层级
      if (data.delta) {
        // 调用微信小程序API进行页面返回
        wx.navigateBack({
          delta: data.delta    // 使用设置的返回层级
        })
      }
      // 触发自定义事件，通知父组件返回按钮被点击
      this.triggerEvent('back', { delta: data.delta }, {})
    }
  },
})
